<template>
  <el-card :body-style="{ padding: '0px' }">
    <ul>
      <li v-for="(item, index) in orderData" :key="index">
        <i
          class="icon"
          :class="item.icon"
          :style="{ background: item.color }"
        ></i>
        <div>
          <p class="money">
            ￥<span>{{ item.value }}</span>
          </p>
          <p>{{ item.orderName }}</p>
        </div>
      </li>
    </ul>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      orderData: [
        {
          orderName: "今日支付订单",
          value: "256",
          icon: "el-icon-goods",
          color: "#2ec7c9",
        },
        {
          orderName: "今日收藏订单",
          value: "624",
          icon: "el-icon-goods",
          color: "#ffb980",
        },
        {
          orderName: "今日未支付订单",
          value: "357",
          icon: "el-icon-goods",
          color: "#5ab1ef",
        },
        {
          orderName: "本月支付订单",
          value: "256",
          icon: "el-icon-goods",
          color: "#2ec7c9",
        },
        {
          orderName: "本月收藏订单",
          value: "624",
          icon: "el-icon-goods",
          color: "#ffb980",
        },
        {
          orderName: "本月未支付订单",
          value: "357",
          icon: "el-icon-goods",
          color: "#5ab1ef",
        },
      ],
    };
  },
};
</script>

<style src='../../../../../style/init.css' scoped>
</style>
<style lang="less" scoped>
.el-card {
  height: 180px;
  background-color: #e9eef2;
  border: 0;
}
ul {
  li {
    position: relative;
    float: left;
    width: 200px;
    height: 80px;
    margin: 0 35px;
    margin-bottom: 20px;
    background-color: #fff;
    .icon {
      position: relative;
      float: left;
      width: 70px;
      height: 80px;
    }
    div {
      float: right;
      margin-top: 8%;
      .money {
        margin-left: 20%;
      }
    }
  }
}
.el-icon-goods:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>